<template>
  <div class="vedioList">
    <div
      class="vedioBox"
      v-for="(video, index) in props.dataList"
      @click="broadcast(video)"
    >
      <!-- <video class="vedioShow" id="myVideoTwo" :poster="video.videoCover" :controls="false">
            </video> -->
      <img class="vedioShow" :src="video.videoCover" alt="" />
      <div class="vedioTitle">{{ video.videoTitle }}</div>
      <svg
        t="1681867670335"
        class="icon sanjiao"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="3422"
        width="40"
        height="40"
      >
        <path
          d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m0 981.333333C256 981.333333 42.666667 768 42.666667 512S256 42.666667 512 42.666667s469.333333 213.333333 469.333333 469.333333-213.333333 469.333333-469.333333 469.333333z"
          fill="#ffffff"
          p-id="3423"
        ></path>
        <path
          d="M503.466667 328.533333c-59.733333-38.4-106.666667-12.8-106.666667 55.466667v256c0 68.266667 46.933333 98.133333 106.666667 59.733333l170.666666-110.933333c59.733333-42.666667 59.733333-106.666667 0-145.066667l-170.666666-115.2z"
          fill="#ffffff"
          p-id="3424"
        ></path>
      </svg>
    </div>
    <!-- <el-pagination v-if="msgList.length > 0" v-model:current-page="Obj.pageNum"
                            v-model:page-size="Obj.pageSize" :page-sizes="[10, 20, 30]" :total="Obj.total"
                            layout="total, sizes, prev, pager, next, jumper" background @size-change="onHandleSizeChange"
                            @current-change="onHandleCurrentChange">
                        </el-pagination> -->
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
const props = defineProps({
  dataList: Array as any
})
const emit = defineEmits(['broadcast'])

const broadcast = (val: any) => {
  emit('broadcast', val.videoId)
}
</script>
<style scoped lang="scss">
.vedioList {
  display: flex;
  flex-flow: row wrap;

  .vedioBox {
    position: relative;
    width: 33%;
    cursor: pointer;
    padding-right: 20px;
    margin-bottom: 15px;

    .vedioShow {
      width: 100%;
      height: 224px;
      border-radius: 4px;
    }

    .vedioTitle {
      color: var(--el-text-color-secondary);
      margin-top: 5px;
      margin-bottom: 5px;
      font-weight: 400;
      color: rgba(77, 77, 77, 1);
    }

    .sanjiao {
      position: absolute;
      left: 50%;
      top: 45%;
      color: #ffffff;
      transform: translate(-50%, -50%);
    }
  }
}
</style>
